<template>
  <div>
    <van-nav-bar
      title="用户添加"
      class="title"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-form @submit="onSubmit">
      <van-field
        v-model="user.name"
        name="姓名"
        label="姓名"
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="user.age"
        type="number"
        name="年龄"
        label="年龄"
        placeholder="年龄"
        :rules="[{ required: true, message: '请填写年龄' }]"
      />
      <van-field
        readonly
        clickable
        name="picker"
        :value="user.type.text"
        label="分类"
        placeholder="点击选择分类"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="types"
          @confirm="onConfirmtype"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="calendar"
        :value="user.birthday"
        label="生日"
        placeholder="点击选择生日"
        @click="showCalendar = true"
      />
      <van-calendar v-model="showCalendar" @confirm="onConfirmBir" />
      <van-field name="uploader" label="文件上传">
        <template #input>
          <van-uploader v-model="uploader" :after-read="afterRead" />
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
    <my-bottom :active="1"></my-bottom>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      user: {
        name: "",
        age: "",
        type: "",
        birthday: "",
        icon: "",
      },
      types: [
        { id: 1, text: "学生" },
        { id: 2, text: "老师" },
        { id: 3, text: "工人" },
      ],
      showPicker: false,
      showCalendar: false,
      uploader: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },

    onConfirmtype(value) {
      console.log(value);
      this.user.type = value;
      this.showPicker = false;
    },
    onConfirmBir(date) {
      this.user.birthday = `${date.getFullYear()}/${
        date.getMonth() + 1
      }/${date.getDate()}`;
      this.showCalendar = false;
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      const formDate = new FormData();
      formDate.append("image", file.file, file.file.name);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      axios
        .post("/api/upload.php", formDate, config)
        .then((res) => {
          console.log(res);
          this.user.icon = res.data.data.src;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onSubmit(values) {
      console.log("submit", values);
      axios
        .post("/api/useradd.php", {
          name: this.user.name,
          age: this.user.age,
          type: this.user.type.id,
          birthday:this.user.birthday,
          icon: this.user.icon,
        })
        .then((response)=> {
          console.log(response);
          Toast.success('添加成功');
          this.$router.go(-1);
        })
        .catch((error) =>{
          console.log(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  background: #42a5f3;
}
>>> .van-nav-bar_title,
>>> .van-nav-bar_arrow {
  color: white;
}
</style>